<template>
  <v-container class="auth-container auth-text" fluid>
    <v-row justify="center">
      <v-col cols="12" sm="8" md="10" lg="8">
        <v-card class="elevation-6">
          <v-card-title class="text-h5 grey lighten-2"> 登出 </v-card-title>
          <v-card-text class="text-center">
            <v-btn color="error" @click="logout" block> 登出 </v-btn>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
    <v-row>
      <v-col cols="12">
        <v-btn color="primary" @click="$router.push('/')" class="mb-4">
          <v-icon start>mdi-home</v-icon>返回主页
        </v-btn>
      </v-col>
    </v-row>
  </v-container>
</template>

<script setup>
import { useRouter } from 'vue-router'

import { getCurrentInstance } from 'vue'
const router = useRouter()
const { proxy } = getCurrentInstance()

// 登出方法
const logout = async () => {
  try {
    // 调用登出 API
    const response = await proxy.$api.logoutUser()
    console.log('登出成功:', response.data)
    alert('登出成功!')
    // 可选：跳转到登录页
    router.push('/login')
  } catch (error) {
    console.error('登出失败:', error)
    alert('登出失败，请重试')
  }
}
</script>

<style scoped>
.auth-container {
  max-width: 600px;
  margin-top: 3rem;
}
</style>
